<html>

<head>
<title>Learning WebGL &mdash; lesson 11</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<link href="../lessons.css" type="text/css" rel="stylesheet" media="screen" />
<script type="text/javascript" src="../../../build/PhiloGL.js"></script>
<script type="text/javascript" src="index.js"></script>

</head>


<body onload="webGLStart();">
  <canvas id="lesson11-canvas" style="border: none;" width="500" height="500"></canvas>
  <script src="https://gist.github.com/818017.js"> </script>
  <br/>
<input type="checkbox" id="lighting" checked /> Use lighting<br/>
Spin the moon by dragging it with the mouse.

<br/>
<h2>Directional light:</h2>

<table style="border: 0; padding: 10px;">
<tr>
<td><b>Direction:</b>
<td>X: <input type="text" id="lightDirectionX" value="-1.0" />
<td>Y: <input type="text" id="lightDirectionY" value="-1.0" />
<td>Z: <input type="text" id="lightDirectionZ" value="-1.0" />
</tr>
<tr>
<td><b>Colour:</b>
<td>R: <input type="text" id="directionalR" value="0.8" />
<td>G: <input type="text" id="directionalG" value="0.8" />
<td>B: <input type="text" id="directionalB" value="0.8" />
</tr>
</table>

<h2>Ambient light:</h2>
<table style="border: 0; padding: 10px;">
<tr>
<td><b>Colour:</b>
<td>R: <input type="text" id="ambientR" value="0.2" />
<td>G: <input type="text" id="ambientG" value="0.2" />
<td>B: <input type="text" id="ambientB" value="0.2" />
</tr>
</table>


<br/>
Moon texture courtesy of <a href="http://maps.jpl.nasa.gov/">the Jet Propulsion Laboratory</a>.
<br/>
<br/>

  <a href="http://learningwebgl.com/blog/?p=1253">&lt;&lt; Back to Lesson 11</a><br />
</body>

</html>
